<template>
	<div class="main">
		<a-row>
			<a-col class="top4"><a-typography-title>监控页</a-typography-title></a-col>
			<a-col class="top4">
				<div class="top4_nr">
					总销售额
					<a-typography-title>¥ 126,560</a-typography-title>
					周同比 12%&nbsp;&nbsp;&nbsp;&nbsp;日同比 11%
				</div>
				<div class="top4_bottom">日销售额 123,456</div>
			</a-col> 
			<a-col class="top4">内容</a-col>
			<a-col class="top4">内容</a-col>
		</a-row>
		<a-row>
			<a-col class="top1">内容</a-col>
		</a-row>
		<a-row>
			<a-col class="top2">内容</a-col>
			<a-col class="top2">内容</a-col>
		</a-row>
		<a-row>
			<a-col class="top3">内容</a-col>
			<a-col class="top3">内容</a-col>
			<a-col class="top3">内容</a-col>
		</a-row>
	</div>
</template>

<style scoped>
.main {
	background: #f0f2f5;
	height: 100%;
	padding: 15px;
	margin: 0px;
}
.top1 {
	width: calc((100% - 20px * 1) / 1);
	height: 500px;
	background: #fff;
	border-radius: 5px;
	margin: 10px;
	padding: 6px;
}
.top2 {
	width: calc((100% - 20px * 2) / 2);
	height: 200px;
	background: #fff;
	border-radius: 5px;
	margin: 10px;
	padding: 6px;
}
.top3 {
	width: calc((100% - 20px * 3) / 3);
	height: 200px;
	background: #fff;
	border-radius: 5px;
	margin: 10px;
	padding: 6px;
}
.top4 {
	width: calc((100% - 20px * 4) / 4);
	height: 200px;
	background: #fff;
	border-radius: 5px;
	margin: 10px;
	padding: 6px 30px;
}

.top4 .top4_nr {
	height: 150px;
}
.top4 .top4_bottom {
	border-top: 1px solid #f0f0f0;
	line-height: 40px;
}
</style>
